<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <title>培训视频课程</title>
  <!-- 引入vant css样式文件 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />
  <!-- <link rel="stylesheet" href="./assets/css/vant.css" /> -->
  <link rel="stylesheet" href="./assets/css/local.css" />
  <!-- 引入vue -->
  <script src="./assets/js/vue.2.5.16.js"></script>
  <!-- 引入vant js文件 -->
  <script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
  <!-- <script src="./assets/js/vant.min.js"></script> -->
  <script src="./assets/js/video.min.js"></script>
  <style type="text/css">
    [v-cloak] {
      display: none;
    }

    .video-js .vjs-duration,
    .vjs-no-flex .vjs-duration {
      display: block;
    }

    .video-js .vjs-current-time,
    .vjs-no-flex .vjs-current-time {
      display: block;
    }
  </style>
</head>

<body>
  <div id="app" class="main" v-cloak>
    <van-nav-bar title="课程评价111fa-stack-1x"  left-arrow></van-nav-bar>

    <div class="">
      <van-form ref="evalForm">
        <van-cell-group title="课程评价" inset>
          <van-cell>
            <van-radio-group v-model="evalFormData.course" direction="horizontal">
              <van-radio :name="item.value" v-for="item in eval_course" :key="item.name">{{item.name}}</van-radio>
            </van-radio-group>
          </van-cell>
        </van-cell-group>
        <van-cell-group title="老师评价" inset>
          <van-cell>
            <van-radio-group v-model="evalFormData.teacher" direction="horizontal">
              <van-radio :name="item.value" v-for="item in eval_teacher" :key="item.name">{{item.name}}</van-radio>
            </van-radio-group>
          </van-cell>
        </van-cell-group>
        <van-cell-group title="学习需求" inset>
          <van-cell>
            <van-radio-group v-model="evalFormData.learning" direction="horizontal">
              <van-radio :name="item.value" v-for="item in demand_learning" :key="item.name">{{item.name}}</van-radio>
            </van-radio-group>
          </van-cell>
        </van-cell-group>
        <van-cell-group title="需求描述" inset v-if="evalFormData.learning==2">
          <van-cell>
            <van-field type="textarea" v-model="evalFormData.desc" name="desc" placeholder="请输入需求描述" maxlength="250" show-word-limit
              :rules="[{ required: evalFormData.learning==2, message: '' }]"></van-field>
          </van-cell>
        </van-cell-group>

        <div style="margin: 1rem;">
          <van-button round block type="info" native-type="submit" @click="evalSubmit">提交</van-button>
        </div>
      </van-form>
    </div>
  </div>
</body>
<script>
  Vue.use(vant);
  new Vue({
    el: "#app",
    data: {
      evalTime: null,
      isEvaling: true,
      eval_course: [
        {name:"满意", value:0},
        {name:"基本满意", value:1},
        {name:"不满意", value:2}
      ],
      eval_teacher: [
        {name:"满意", value:0},
        {name:"基本满意", value:1},
        {name:"不满意", value:2}
      ],
      demand_learning: [
        {name:"备考", value:0},
        {name:"继续教育", value:1},
        {name:"其他", value:2}
      ],
      evalFormData: {
        course: 0,
        teacher: 0,
        learning: 0,
        desc: ""
      },
    },
    methods: {
      evalSubmit(e){
        console.log(this.evalFormData)
      }
    },
  })
</script>